const wrap = document.querySelector(".wrapper");
const text = wrap.getAttribute("data-text");
const frag = document.createDocumentFragment();
[...text].forEach((char, i, array) => {
  const ele = document.createElement("div");
  ele.classList.add("element");
  ele.style.setProperty("--i", i);
  ele.style.setProperty("--total", array.length);
  const content = document.createElement("span");
  content.classList.add("content");
  const tx = document.createElement("span");
  tx.classList.add("text");
  tx.textContent = char;
  content.appendChild(tx);
  ele.appendChild(content);
  frag.appendChild(ele);
});
wrap.appendChild(frag);
